<template>
  <card-layout title="生态告警" bg="3" class="chart">
    <template #extra>
      <el-icon class="extra-more" :size="22" @click="onClose">
        <Close />
      </el-icon>
    </template>
    <div class="ecological-warning">
      <!-- 选项卡 -->
      <div class="tab-container">
        <div class="tab-buttons">
          <button 
            class="tab-button" 
            :class="{ active: activeTab === 'monitor' }"
            @click="activeTab = 'monitor'"
          >
            环境监测
          </button>
          <button 
            class="tab-button" 
            :class="{ active: activeTab === 'supervision' }"
            @click="activeTab = 'supervision'"
          >
            工程监管
          </button>
        </div>
      </div>

      <!-- 告警内容 -->
      <div class="warning-content">
        <Transition name="tab-fade" mode="out-in">
          <!-- 环境监测告警 -->
          <div v-if="activeTab === 'monitor'" key="monitor" class="warning-list">
            <div 
              v-for="(warning, index) in monitorWarnings" 
              :key="index" 
              class="warning-item"
            >
              <div class="warning-header">
                <div class="warning-title">{{ warning.title }}</div>
                <div class="warning-time">{{ warning.time }}</div>
              </div>
              <div class="warning-description">{{ warning.description }}</div>
              <div class="warning-footer">
                <button class="view-link" @click="viewDetails(warning)">
                  点击查看 →
                </button>
              </div>
            </div>
          </div>

          <!-- 工程监管告警 -->
          <div v-else-if="activeTab === 'supervision'" key="supervision" class="warning-list">
            <div 
              v-for="(warning, index) in supervisionWarnings" 
              :key="index" 
              class="warning-item"
            >
              <div class="warning-header">
                <div class="warning-title">{{ warning.title }}</div>
                <div class="warning-time">{{ warning.time }}</div>
              </div>
              <div class="warning-description">{{ warning.description }}</div>
              <div class="warning-footer">
                <button class="view-link" @click="viewDetails(warning)">
                  点击查看 →
                </button>
              </div>
            </div>
          </div>
        </Transition>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref } from "vue";
import { Close } from "@element-plus/icons-vue";

const emits = defineEmits(["close"]);
const activeTab = ref("monitor");

// 环境监测告警数据
const monitorWarnings = ref([
  {
    title: "【生态治理告警】矿区内PM2.5浓度超标，当前浓度为110μg/m³，超过标准值75μg/m³，请及时处理！",
    description: "检测到矿区内PM2.5浓度持续上升，可能影响周边环境质量。",
    time: "2025/06/09 09:31:17"
  },
  {
    title: "【噪音监测告警】矿区A区域噪音超标，当前噪音值为85dB，超过标准值70dB，可能对周边居民造成影响。",
    description: "建议立即检查设备运行状态，采取降噪措施。",
    time: "2025/06/09 09:31:17"
  },
  {
    title: "【土壤pH值异常】矿区B区域土壤pH值为4.2，低于正常范围6.0-8.0，需要进行土壤改良处理。",
    description: "土壤酸化可能影响植被生长和生态恢复效果。",
    time: "2025/06/09 09:31:17"
  }
]);

// 工程监管告警数据
const supervisionWarnings = ref([
  {
    title: "【工程进度告警】生态修复工程第三阶段进度滞后，当前完成度为65%，计划完成度为80%。",
    description: "建议加快施工进度，确保按期完成修复任务。",
    time: "2025/06/09 08:45:23"
  },
  {
    title: "【资金使用告警】本月修复工程资金使用超出预算15%，请控制成本支出。",
    description: "当前已使用资金32.5万元，预算为28.2万元。",
    time: "2025/06/09 08:30:15"
  },
  {
    title: "【设备维护提醒】监测设备编号MT-001需要进行定期维护，上次维护时间为30天前。",
    description: "为确保监测数据准确性，请及时安排设备维护。",
    time: "2025/06/09 07:20:45"
  }
]);

const onClose = () => {
  emits("close");
};

const viewDetails = (warning) => {
  console.log("查看详情:", warning);
  // 这里可以添加查看详情的逻辑，比如打开弹窗或跳转页面
};
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
}

.ecological-warning {
  background-color: transparent;
  color: #333;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px;

  .tab-container {
    margin-bottom: 16px;
    
    .tab-buttons {
      display: flex;
      gap: 2px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 4px;
      
      .tab-button {
        flex: 1;
        padding: 8px 16px;
        border: none;
        background: transparent;
        color: #dedede;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 14px;
        font-weight: 500;
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #fff;
        }
        
        &.active {
          background: #00d4aa;
          color: #fff;
          box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3);
        }
      }
    }
  }

  .warning-content {
    flex: 1;
    overflow-y: auto;
    
    .warning-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      
      .warning-item {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 16px;
        border-left: 4px solid #ff6b6b;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(255, 255, 255, 0.08);
          transform: translateX(2px);
        }
        
        .warning-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 8px;
          gap: 12px;
          
          .warning-title {
            flex: 1;
            font-size: 13px;
            color: #fff;
            font-weight: 500;
            line-height: 1.4;
          }
          
          .warning-time {
            font-size: 11px;
            color: #999;
            white-space: nowrap;
            margin-top: 2px;
          }
        }
        
        .warning-description {
          font-size: 12px;
          color: #dedede;
          line-height: 1.4;
          margin-left: 0;
          margin-bottom: 12px;
        }
        
        .warning-footer {
          display: flex;
          justify-content: flex-end;
          
          .view-link {
            background: transparent;
            border: 1px solid #00d4aa;
            color: #00d4aa;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s ease;
            
            &:hover {
              background: #00d4aa;
              color: #fff;
              transform: translateX(2px);
            }
          }
        }
      }
    }
  }
}

/* 选项卡切换动画 */
.tab-fade-enter-active,
.tab-fade-leave-active {
  transition: all 0.3s ease;
}

.tab-fade-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.tab-fade-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* 滚动条样式 */
.warning-content::-webkit-scrollbar {
  width: 4px;
}

.warning-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.warning-content::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 170, 0.6);
  border-radius: 2px;
  
  &:hover {
    background: rgba(0, 212, 170, 0.8);
  }
}
</style>